import React, { memo, useEffect, useState } from 'react';
// 导入swiper的样式
import 'swiper/swiper-bundle.css';
// 导入需要的组件
// Import Swiper React components
import Swiper, { Pagination, Autoplay } from 'swiper';
import { SliderContainer } from './style';
// 使用组件
Swiper.use([Pagination, Autoplay]);

export default memo(function Slider(props) {
  const [silderSwiper, setSliderSwiper] = useState(null);
  const { bannerList } = props;
  useEffect(() => {
    // bannerList有内容 并且silderSwiper为空的时候
    if (bannerList.length && !silderSwiper) {
      // 创建一个Swiper对象 挂在到slider-container
      // pagination 挂在到swiper-pagination
      let newSliderSwiper = new Swiper('.slider-container', {
        // 循环模式开启
        loop: true,
        //可选选项，自动滑动
        autoplay: {
          // 自动切换的时间间隔
          delay: 3000,
          // 用户操作swiper之后，是否禁止autoplay。默认为true
          // 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay
          disableOnInteraction: false,
        },
        // 使用分页器导航。分页器可使用小圆点样式（默认）、分式样式或进度条样式。
        pagination: { el: '.swiper-pagination' },
      });
      setSliderSwiper(newSliderSwiper);
    }
  }, [bannerList.length, silderSwiper]);
  return (
    <SliderContainer>
      <div className="before"></div>
      <div className="slider-container">
        <div className="swiper-wrapper">
          {bannerList.map((slider, index) => {
            return (
              <div className="swiper-slide" key={slider.imageUrl + index}>
                <div className="slider-nav">
                  <img
                    src={slider.imageUrl}
                    alt="推荐"
                    width="100%"
                    height="100%"
                  />
                </div>
              </div>
            );
          })}
        </div>
        <div className="swiper-pagination"></div>
      </div>
    </SliderContainer>
  );
});
